<template>
  <view class="container">
    <view class="app">
      <view class="card91">
        <view class="card-bg-box91">
          <view class="card-bg91"></view>
        </view>
        <view class="card-main91">
          <view class="card-content91">
            <!-- 输入框 -->
            <view class="input-wrapper">
              <input type="text" placeholder="请输入纪念日内容" class="input-field" v-model="content" />
            </view>

            <!-- 日期选择器部分 -->
            <view class="uni-list">
              <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                <view class="uni-input">{{ date ? date : '请选择日期' }}</view>
              </picker>
            </view>

            <!-- 完成按钮 -->
            <button class="complete-btn" @click="onComplete">完成</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

  
<script>
import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue';

export default {
  components: { uniBadge },
  data() {
    return {
      date: '', // 初始日期为空
      startDate: '2024-01-01',
      endDate: '2025-12-31',
      content: '', // 用来绑定输入框内容
    };
  },
  methods: {
    // 选择日期时的回调
    bindDateChange(e) {
      this.date = e.detail.value; // 获取选择的日期
    },

    // 完成按钮点击事件
    onComplete() {
      if (!this.date) {
        // 判断是否选择了日期
        uni.showToast({
          title: '请选择一个日期',
          icon: 'none',
          duration: 2000,
        });
        return;
      }

      // 获取输入的纪念日内容
      const content = this.content; // 使用绑定的变量
      if (!content) {
        // 检查是否输入了纪念日内容
        uni.showToast({
          title: '请输入纪念日内容',
          icon: 'none',
          duration: 2000,
        });
        return;
      }

      // 调用云函数保存数据
      this.saveToDatabase(content, this.date);

      uni.showToast({
        title: '完成',
        icon: 'success',
        duration: 1000,
      });

      // 跳转到下一个页面
      setTimeout(() => {
        this.goBackToCurrentPage();
      }, 1000);
    },

    // 将数据保存到云数据库
    async saveToDatabase(content, date) {
      try {
        const result = await uniCloud.database().collection('Commemoration').add({
          content: content,
          time: date,
        });

        console.log('数据保存成功', result);
      } catch (error) {
        console.error('保存数据失败', error);
        uni.showToast({
          title: '保存失败，请重试',
          icon: 'none',
          duration: 2000,
        });
      }
    },

    // 返回到当前页面
    goBackToCurrentPage() {
      uni.navigateBack({
      data : 1, // 返回上一级页面
      });
    },
  },
};
</script>

  
  <style scoped>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: #e4e4da;
  }
  
  .app {
    width: 90%;
    max-width: 500px;
    height: 80vh;
    background-color: #f8e1f4;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
    animation: scaleIn 0.6s ease-in-out;
  }
  
  @keyframes scaleIn {
    0% {
      transform: scale(0.8);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .card91 {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
  }
  
  .card-bg-box91 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    overflow: hidden;
  }
  
  .card-bg91 {
    width: 120%;
    height: 120%;
    background: linear-gradient(135deg, #a826ac 30%, #a5619b 40%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
    animation: rotateBg 20s linear infinite;
    filter: brightness(1.5);
  }
  
  @keyframes rotateBg {
    0% {
      transform: translate(-50%, -50%) rotate(0deg) scale(1.2);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg) scale(1.2);
    }
  }
  
  .card-main91 {
    width: 100%;
    height: 100%;
    padding: 20px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
  }
  
  .card-content91 {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color: #ffffff;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
  }
  
  .input-wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 15px;
  }
  
  .input-field {
    width: 90%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    background-color: #ffffff;
    transition: border 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
  
  .input-field:focus {
    border-color: #a826ac;
    box-shadow: 0 0 8px rgba(168, 38, 172, 0.4);
    outline: none;
  }
  
  .uni-input {
    font-size: 16px;
    color: #555;
    padding: 10px;
    border-radius: 5px;
    background-color: #fff;
    margin-bottom: 15px;
    transition: background-color 0.3s ease;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
  }
  
  .complete-btn {
    background-color: #dd93df;
    color: white;
    font-size: 18px;
    padding: 10px 40px;
    margin-top: 15px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  </style>
  